<template lang="">
  <div class="home_container">
    <el-container>
        <!-- 侧边栏区域 -->
        <el-aside width="200px">
            <!-- 侧边栏头像区 -->
            <div class="avatar_box">
                <el-avatar icon="el-icon-user-solid" :size="80"></el-avatar>
                <div class="admin_name">
                    <span>adminName</span>
                </div>
            </div>
            <!-- 侧边栏菜单区 -->
            <el-menu default-active="2" class="el-menu-vertical-demo" :router="true">
                <el-menu-item index="4" route="/manager/user">
                    <template #title>
                        <i class="iconfont icon-yonghuguanli"></i>
                        <span>人员管理</span>
                    </template>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <el-breadcrumb separator-class="el-icon-arrow-right"> 
                    <el-breadcrumb-item :to="{ path: '/manager/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="function_box">
                    <div class="iconfont icon-xinxi"></div>
                    <div class="iconfont icon-shezhi"></div>
                    <div class="iconfont icon-tuichu" @click="exite"></div>
                </div>
            </el-header>
            <!-- 页面主体区域 -->
            <el-main>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
        </el-container>
	</el-container>
  </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        exite() {
            this.$message.success('退出登录')
            this.$router.push('/user/login')
        }
    }
};
</script>
<style lang="less" scoped>  
    .home_container {
        height: 100%;
        .el-container {
            height: 100%;
            background-color: #053053;
            color: #f9ffff;
            .el-aside {
                .avatar_box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    padding: 20px 0;
                    .admin_name {
                        margin-top: 10px;
                    }
                }
            }
            .el-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: nowrap;
                background-color: #021d33;
                .el-breadcrumb  /deep/  .el-breadcrumb__inner {
                    color: #ccc !important;
                }
                .function_box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .iconfont {
                        padding: 0 10px;
                        font-size: 20px;
                        cursor: pointer;
                    }
                }
            }
            .el-main {
                background-color: #666;
            }
        }
    }
</style>